@use '../material' as mat;
@use '../material/core/density/private/all-density' as private-all-density;
@use '../material-experimental/column-resize/column-resize';
@use '../material-experimental/mdc-helpers/focus-indicators-theme' as mdc-focus-indicators-theme;
@use '../material-experimental/mdc-helpers/focus-indicators' as mdc-focus-indicators;
@use '../material-experimental/mdc-color/all-color' as mdc-all-color;
@use '../material-experimental/mdc-theming/all-theme' as mdc-all-theme;
@use '../material-experimental/mdc-density/all-density' as mdc-all-density;
@use '../material-experimental/mdc-slider/slider-theme' as mdc-slider-theme;
@use '../material-experimental/popover-edit/popover-edit';

// Plus imports for other components in your app.

// Define the default (light) theme.
$candy-app-primary: mat.define-palette(mat.$indigo-palette);
$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$candy-app-theme: mat.define-light-theme((
  // Define the default colors for our app.
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent
  ),
  // Define the default typography for our app.
  typography: mat.define-typography-config(),
  // Define the default density level for our app.
  density: 0,
));

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat.core($candy-app-theme);

// Include the default theme styles.
@include mat.all-component-themes($candy-app-theme);
@include mdc-all-theme.all-mdc-component-themes($candy-app-theme);
@include column-resize.theme($candy-app-theme);
@include popover-edit.theme($candy-app-theme);
// We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
@include mdc-slider-theme.theme($candy-app-theme);

.demo-strong-focus {
  // Include base styles for strong focus indicators.
  @include mat.strong-focus-indicators();
  @include mdc-focus-indicators.strong-focus-indicators();

  // Include the default theme for focus indicators.
  @include mat.strong-focus-indicators-theme($candy-app-theme);
  @include mdc-focus-indicators-theme.theme($candy-app-theme);
}

// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
// default theme.
.demo-unicorn-dark-theme {
  // Create the color palettes used in our dark theme.
  $dark-primary: mat.define-palette(mat.$blue-grey-palette);
  $dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
  $dark-warn: mat.define-palette(mat.$deep-orange-palette);
  $dark-colors: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn);

  // Include the dark theme color styles.
  @include mat.all-component-colors($dark-colors);
  @include mdc-all-color.all-mdc-component-colors($dark-colors);
  @include column-resize.color($dark-colors);
  @include popover-edit.color($dark-colors);
  // We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
  @include mdc-slider-theme.color($dark-colors);

  // Include the dark theme colors for focus indicators.
  .demo-strong-focus {
    @include mat.strong-focus-indicators-color($dark-colors);
    @include mdc-focus-indicators-theme.color($dark-colors);
  }
}

// Create classes for all density scales which are supported by all MDC-based components.
// The classes are applied conditionally based on the selected density in the dev-app layout
// component.
$density-scales: (-1, -2, minimum, maximum);
@each $density in $density-scales {
  .demo-density-#{$density} {
    @include private-all-density.all-component-densities($density);
    @include mdc-all-density.all-mdc-component-densities($density);
  }
}
